<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>newTravel - new Happy Trip</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
    <div class="bodyBg">
        <header class="header">
            <div class="logobox">
                <a href=""><img src="./img/16gl-N.svg"  alt="newTravel-logo" id="logo"/></a>	
            </div>
            <div class="navBox">
                <ul>
                    <li><a href="./index.html">首页</a></li>
                    <li><a href="./spotsContent.html">景点目录</a></li>
                    <li><a href="./travelVideo.html">视频攻略</a></li>
                    <li><a href="./aboutNT.html">关于newTravel</a></li>
                </ul>
                </p>
            </div>
            <div class="loginBox">
                <ul>
                    <!-- span 划线 三条杠 下滑菜单键 -->
                    <span></span>
                    <span></span>
                    <span></span>
                    <li><a href="./login.html">注册</a></li>
                    <li><a href="./login.html">登陆</a></li>
                </ul>
            </div>
        </header>

        <main class="contentBox">
            <!-- lunbo  -->
            <section class="lunboSec">
                <div class="lunboBox">
                    <img class="lunboBoxImg" src="./img/lunbo02.jpg" alt="lunboPhoto">
                </div>
                <div class="btn">
                    <div class="rightBtn" onclick="rightLunboFoo()"> < </div>
                    <div class="leftBtn" onclick="leftLunboFoo()"> > </div>
                </div>
                <div class="clickBtn">
                    <input type="radio" name="lunboPhoto" id="imgId">
                    <input type="radio" name="lunboPhoto" id="imgId">
                    <input type="radio" name="lunboPhoto" id="imgId">
                </div>
            </section>
            <section class="content">
                <div class="contentTit">
                    <h1>
                        热门景点介绍
                    </h1>
                </div>
                <a href="./spotsWeb/qingchengshan/spotsTemplate.html" class="spotsBox">
                    <div class="spotImg  qingchengImg"></div>
                    <div class="spotInfo  qingcheng">
                        <h1>青城山</h1>
                        <p>世界文化遗产青城山,国家AAAAA级旅游景区
                        </p>
                    </div>
                </a>
                <a href="./spotsWeb/jiuzhaigou/spotsTemplate.html" class="spotsBox">
                    <div class="spotInfo jiuzhai">
                        <h1>九寨沟</h1>
                        <p>世界文化遗产青城山,国家AAAAA级旅游景区
                        </p>
                    </div>
                    <div class="spotImg jiuzhaiImg"></div>
                </a>
                <a href="./spotsWeb/daocheng/spotsTemplate.html" class="spotsBox">
                    <div class="spotImg daochengImg"></div>
                    <div class="spotInfo daocheng">
                        <h1>稻城</h1>
                        <p>世界文化遗产青城山,国家AAAAA级旅游景区
                        </p>
                    </div>
                </a>
                <a href="./spotsWeb/bipenggou/spotsTemplate.html" class="spotsBox">
                    <div class="spotInfo bipenggou">
                        <h1>毕棚沟</h1>
                        <p>世界文化遗产青城山,国家AAAAA级旅游景区
                        </p>
                    </div>
                    <div class="spotImg bipenggouImg"></div>
                </a>
                
            </section>
        </main>  
    </div>
    <footer class="footer">
        <div class="footInfo">
            <h3>
                newTravel Studio
            </h3>
            <p>
                <a href="">联 系 我 们 </a>
            </p>
            <p>
            <a href="./WebDisInfo.html">授 权 信 息</a>&nbsp;&nbsp;  
            <a href="./WebDisInfo.html">网 站 条 款</a>&nbsp;&nbsp; 
            <a href="./WebDisInfo.html">更 多 内 容</a>&nbsp;&nbsp; 
            <a href="">友 情 链 接</a>&nbsp;&nbsp; 
            </p>
            <p>
                @2022 copyright all right reserved 
            </p>
        </div>
    </footer>


    <script>
        // ----------轮播图函数！！！！！----------
        // 共 四 个函数
        // 左箭头轮播-函数
        // 右箭头轮播-函数
        // 自动轮播-函数
        // 圆点轮播-函数

        // 手动轮播-----------
        // 左箭头轮播-----------
        function leftLunboFoo(){
            var lunboBox = document.querySelector('.lunboBoxImg');
            // 提取当前“src”中的数字，正则表达式
            var imgId = parseInt(lunboBox.getAttribute('src').replace(/[^\d]/g,""));
            if (imgId==3) {
                // debugger;
                imgId = 1;
                // debugger;
                lunboBox.setAttribute('src','img/lunbo0'+(imgId++)+'.jpg');
                // debugger;
            }
            else{
                // debugger;
                imgId++;
                // debugger;
                lunboBox.setAttribute('src','img/lunbo0'+imgId+'.jpg');
                // debugger;
                // console.log(imgId,'img/lunbo0'+imgId+'.jpg');
            }
        };

        // 右箭头轮播-----------
        function rightLunboFoo(){
            var lunboBox = document.querySelector('.lunboBoxImg');
            // 提取当前“src”中的数字，正则表达式
            var imgId = parseInt(lunboBox.getAttribute('src').replace(/[^\d]/g,""));
            if (imgId==1) {
                // debugger;
                imgId = 3;
                // debugger;
                lunboBox.setAttribute('src','img/lunbo0'+(imgId--)+'.jpg');
                // debugger;
            }
            else{
                // debugger;
                imgId--;
                // debugger;
                lunboBox.setAttribute('src','img/lunbo0'+imgId+'.jpg');
                // debugger;
                console.log(imgId,'img/lunbo0'+imgId+'.jpg');
            }
        };

        // ---自动轮播函数---重复计时器！！！---------------------
        setInterval(() => {
            var lunboBox = document.querySelector('.lunboBoxImg');
            // 提取当前“src”中的数字，正则表达式
            var imgId = parseInt(lunboBox.getAttribute('src').replace(/[^\d]/g,""));
            if (imgId==3) {
                // debugger;
                imgId = 1;
                // debugger;
                lunboBox.setAttribute('src','img/lunbo0'+(imgId++)+'.jpg');
                // debugger;
            }
            else{
                // debugger;
                imgId++;
                // debugger;
                lunboBox.setAttribute('src','img/lunbo0'+imgId+'.jpg');
                // debugger;
                // console.log(imgId,'img/lunbo0'+imgId+'.jpg');
            }
        }, 5000);

        // 圆点轮播-函数-----------------------------
        // 可以考虑用 for 来给每一个input上函数
        function clickBtnFoo(){
            let getImgId = document.querySelectorAll('#imgId')
            let targetNode = document.querySelector('.lunboBoxImg');

            // console.log(getImgId);
            getImgId[0].onclick=()=>{
                // console.log('11:',targetNode);
                targetNode.setAttribute('src','./img/lunbo01.jpg');
                // console.log('22:',targetNode);
            };
            getImgId[1].onclick=()=>{
                targetNode.setAttribute('src','./img/lunbo02.jpg');
            };
            getImgId[2].onclick=()=>{
                targetNode.setAttribute('src','./img/lunbo03.jpg');
            };
            // console.log(getImgId[0]);

        }
        clickBtnFoo();

    </script>
</body>
</html>